<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="快递100" name="first">
          <title-line title="参数信息">
            <div class="ml-20">
              <svg-icon icon-class="badge" style="color: #409eff" />
              <span class="ft-12">不知道如何获取？那不妨</span>
              <span class="ft-12" style="color: #409eff; text-decoration: underline">查看示例</span>
            </div>
          </title-line>
          <el-form ref="elForm" :model="formData" label-width="110px">
            <el-row>
              <el-col :lg="12" :xl="10">
                <el-form-item label="账号名称：">
                  <el-input v-model="formData.userName" placeholder="请输入快递100的账号名称" />
                </el-form-item>
                <el-form-item label="密钥key：">
                  <el-input v-model="formData.key" placeholder="请输入快递100的秘钥key" />
                </el-form-item>
                <el-form-item label="cutomer：">
                  <el-input v-model="formData.customer" placeholder="请输入快递 cutomer" />
                </el-form-item>
                <el-form-item class="text-center">
                  <el-button @click="resetForm">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ExpressConfig',
  props: {},
  data() {
    return {
      activeName: 'first',
      formData: {
        key: '',
        userName: '',
        customer: ''
      }
    }
  },
  created() {
    this.getExpressCompanyConfig()
  },
  methods: {
    // 获取快递公司配置
    async getExpressCompanyConfig() {
      const { data } = await this.$http.express.companyApi.getExpressCompanyConfig()
      for (const key in data) {
        this.formData[key] = data[key]
      }
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
